<template>
    <div class="page-safe">
         <div class="wp-inner">
            <div class="page page1">
                <div class="title"></div>
                <div class="slogan"></div>
                <div class="intro"></div>
                <div class="a-txt">向上滑动</div>
                <div class="js-animate move" data-animate="expandOpen"></div>
            </div>
            <div class="page page2">
                <div class="title"></div>
                <div class="intro">
                  <div class="intro_con">
                    <div  class="i-item" >
                      <h4>严苛的项目甄选</h4>
                      <p>严格评估各项指标，从众多的项目中选择最优质的理财项目，剔除不良的方</p>
                    </div>
                    <div class="i-item">
                      <h4>透明的项目信息</h4>
                      <p>项目各项信息和资料真实有效，细节信息披露透明</p>
                    </div>
                    <div class="i-item">
                      <h4>全流程风控体系</h4>
                      <p>严格执行前、中、后全流程追踪管理和风险控制体系</p>
                    </div>
                  </div>
                  
                </div>
                <div class="js-animate move" data-animate="expandOpen"></div>
            </div>
            <div class="page page3">
                <div class="title"></div>
                <div class="intro">
                  <div class="intro_con">
                     <div class="i-item">
                        <h4>银行存管</h4>
                        <p>签约攀枝花银行存管，平台资金和用户资金隔离，保障项目真实性和客户资金不被挪用</p>
                      </div>
                      <div class="i-item">
                        <h4>同卡进出，信息加密</h4>
                        <p>资金同卡进出原则，有效防止盗刷</p>
                      </div>
                  </div> 
                </div>
                <div class="js-animate move" data-animate="expandOpen"></div>
            </div>
            <div class="page page4">
                <div class="title"></div>
                <div  class="intro">
                  <div class="intro_con">
                    <div class="i-item">
                      <h4>专业技术团队</h4>
                      <p>团队均来自国内各大金融机构，在信息安全和数据安全方面有着丰富的经验</p>
                    </div>
                    <div class="i-item">
                      <h4>现金技术保障</h4>
                      <p>三层防火墙隔离系统，7*24小时全天候实时监控，确保交易数据安全无误</p>
                    </div>
                    <div class="i-item">
                      <h4>全面隐私保护</h4>
                      <p>用户的隐私信息都经过MD5加密处理,全面保护用户隐私安全</p>
                    </div>
                  </div>  
                </div>
                <div class="js-animate move" data-animate="expandOpen"></div>
            </div>
            <div class="page page5">
                <div class="title"></div>
                <div class="intro">
                  <div class="intro_con">
                      <div class="i-item">
                        <h4>平台运营安全可靠</h4>
                        <p>平台为所有投资者与理财产品提供方提供信息安全保障，所有交易资金均有第三方支付平台专户管理、实现专款专用</p>
                      </div>
                      <div class="i-item">
                        <h4>业务模式合法合规</h4>
                        <p>根据《合同法》规定，平台提供居间服务、民间关系以及投资者获取收益均合法合规；根据《电子签名法》规定，电子合同具有法律效力</p>
                      </div>
                  </div>
                  
                </div>
                <div class="js-animate move" data-animate="expandOpen"></div>
            </div>
        </div>
        <!-- 箭头 -->
          
        <div class="page-arrow slideInUp">
         
        </div>
    </div>
</template>

<script>
import "public/style/animations.css";
import "public/libs/zepto.fullpage.css";
var fullpage = require("@/public/libs/zepto.fullpage.js");
export default {
  name: "aboutUs",
  data() {
    return {
      msg: "Welcome to Your aboutUs"
    };
  },
  mounted() {
    $(".wp-inner").fullpage({
      drag: true,
      duration: 300,
      der: 0.1,
      start: 0,
      change: function(e) {
        // 移除动画属性
        $(".page")
          .eq(e.cur)
          .find(".js-animate")
          .each(function() {
            $(this)
              .removeClass($(this).data("animate"))
              .css({
                transform: "scale(1.12)",
                "-webkit-transform": "scale(1.12)"
              });
          });

        console.log(e.cur);
        if (e.cur == $(".page").length - 1) {
          $(".page-arrow").hide();
        } else {
          $(".page-arrow").show();
        }
      },
      afterChange: function(e) {
        // 添加动画属性
        $(".page")
          .eq(e.cur)
          .find(".js-animate")
          .each(function() {
            $(this)
              .addClass($(this).data("animate"))
              .css({
                transform: "scale(1)",
                "-webkit-transform": "scale(1)"
              })
              .show();
          });
      }
    });
  }
};
</script>

<style lang="less" scoped>
.page-safe {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: #29044f;
  //   箭头
  .page-arrow {
    position: absolute;
    width: 42px;
    height: 44px;
    left: 50%;
    bottom: 50px;
    margin-left: -21px;
    background: url(../public/imgs/s-arrow.png) center 0 no-repeat;
    background-size: 42px 44px;
  }

  @keyframes slideInUp {
    0% {
      opacity: 0;
      transform: translate3d(0, -8px, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: translate3d(0, 10px, 0);
      transform: translate3d(0, 10px, 0);
    }
  }

  .slideInUp {
    animation: slideInUp 1s infinite ease-in-out;
  }

  .title {
    position: absolute;
    left: 45px;
    top: 50px;
  }
  .page1,
  .page2,
  .page3,
  .page4,
  .page5 {
    position: relative;
    font-size: 24px;
    background: #29044f url(../public/imgs/s-top-bg.png) center 0 no-repeat;
    background-size: 358px 108px;
    .intro {
      position: absolute;
      left: 0;
      top: 620px ;
      // padding: 630px 0 0 0;
      width: 100%;
      height: 540px;
      display: flex;
      align-items: center;
      z-index: 9;
      .i-item {
        margin-bottom: 16px;
        box-sizing: border-box;
        padding: 16px 30px 0 50px;
        h4 {
          height: 60px;
          line-height: 60px;
          font-size: 30px;
          font-weight: normal;
          color: #fff;
          background: url(../public/imgs/s-i-bg.png) 0 center no-repeat;
          background-size: 25px 28px;
          box-sizing: border-box;
          padding-left: 52px;
        }
        p {
          font-size: 26px;
          color: rgba(195, 166, 255, 0.6);
          line-height: 35px;
          box-sizing: border-box;
          padding-left: 50px;
        }
      }
    }
  }
  //  第一页
  .page1 {
    background: url(../public/imgs/s-bg.png) 0 0 no-repeat;
    background-size: cover;
    .title {
      width: 318px;
      height: 295px;
      background: url(../public/imgs/s-title-1.png) 0 0 no-repeat;
      background-size: 318px 295px;
      z-index: 9;
    }
    .a-txt {
      position: absolute;
      left: 50%;
      bottom: 110px;
      color: #f4abff;
      font-size: 24px;
      text-align: center;
      left: 50%;
      width: 100%;
      height: 40px;
      transform: translate(-50%, 0);
    }
    .slogan {
      position: absolute;
      right: 57px;
      top: 0px;
      width: 18px;
      height: 439px;
      background: url(../public/imgs/s-1-1.png) 0 0 no-repeat;
      background-size: 18px 439px;
    }
    .move {
      position: absolute;
      left: 0;
      bottom: 0px;
      width: 750px;
      height: 893px;
      transform-origin: 50% 50%;
      transform: scale(1.12);
      // background: url(../public/imgs/s-1-move.png) left bottom no-repeat;
      background: url(../public/imgs/page1.png) left bottom no-repeat;
      background-size: 750px 893px;
    }
  }
  //  第2页
  .page2 {
    .title {
      width: 250px;
      height: 76px;
      background: url(../public/imgs/s-title-2.png) 0 0 no-repeat;
      background-size: 250px 76px;
    }

    .move {
      position: absolute;
      left: 0;
      top: -55px;
      transform-origin: 50% 50%;
      width: 750px;
      height: 965px;
      transform: scale(1.12);
      // background: url(../public/imgs/s-2-move.png) center no-repeat;
      background: url(../public/imgs/page2.png) left bottom no-repeat;
      background-size: 750px 965px;
    }
  }
  //  第3页
  .page3 {
    .title {
      width: 251px;
      height: 76px;
      background: url(../public/imgs/s-title-3.png) 0 0 no-repeat;
      background-size: 251px 76px;
    }
    .move {
      position: absolute;
      left: 0;
      top: 25px;
      transform-origin: 50% 50%;
      width: 750px;
      height: 894px;
      transform: scale(1.12);
      // background: url(../public/imgs/s-3-move.png) center no-repeat;
      background: url(../public/imgs/page3.png) left bottom no-repeat;
      background-size: 750px 894px;
    }
  }
  //  第一页
  .page4 {
    .title {
      width: 251px;
      height: 75px;
      background: url(../public/imgs/s-title-4.png) 0 0 no-repeat;
      background-size: 251px 75px;
    }
    .move {
      position: absolute;
      left: 0;
      top: 75px;
      transform-origin: 50% 50%;
      width: 750px;
      height: 646px;
      transform: scale(1.12);
      // background: url(../public/imgs/s-4-move.png) center no-repeat;
      background: url(../public/imgs/page4.png) left bottom no-repeat;
      background-size: 750px 646px;
    }
  }
  //  第一页
  .page5 {
    .title {
      width: 215px;
      height: 75px;
      background: url(../public/imgs/s-title-5.png) 0 0 no-repeat;
      background-size: 215px 75px;
    }
    .move {
      position: absolute;
      left: 0;
      top: 85px;
      transform-origin: 50% 50%;
      width: 750px;
      height: 768px;
      transform: scale(1.12);
      // background: url(../public/imgs/s-5-move.png) center no-repeat;
      background: url(../public/imgs/page5.png) left bottom no-repeat;
      background-size: 750px 768px;
    }
  }
}
</style>
